﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>

<link href="core.css" rel="stylesheet" type="text/css"/>
<link href="xTabPanel.css" rel="stylesheet" type="text/css"/>

</head>

<body>
<div id="main"></div>

<input type="button" value="增加卡片" onclick="add()"/>
<input type="button" value="增加一个宽度固定的卡片" onclick="add1()"/>
<input type="button" value="关闭第二个卡片，start index is 0" onclick="tabpanel.removeTab(1);"/>
<input type="button" value="改变文字" onclick="tabpanel.setTitle(0, '我的文字被改变了')"/>


<script src="jquery.js" type="text/javascript"></script>
<script src="xTabPanel.js" type="text/javascript"></script>

<script type="text/javascript">
  var tabpanel, i = 1;
	$(function(){
		tabpanel = new TabPanel({
			id: 'jTabPanel',
			renderTo: 'main',
			width: 600,
			height: 400,
			border: true,
			defaultTab: 0,
			maxTab: 12,
			icon: 'module_icon.gif',
			items: [{
				id: 'workspace',
				title: 'My workspace',
				closable: false,
				html: '<iframe id="workspace" name="workspace" src="http://www.baidu.com" width="100%" height="100%" frameborder="0"></iframe>',
				position: {
					a: '0px -110px',
					b: '-22px -110px'
				}
			}]
		});
	});
	
	function add() {
		tabpanel.addTab({
			id: 'add'+i,
			title: '事件触发打开的'+i,
			closable: i%2!==0,
			html: '<div>Tab'+i+'</div>',
			position: {
				a: '0px 0px',
				b: '-22px 0px'
			}
		});
		i++;
	}

	function add1() {
		tabpanel.addTab({
			id: 'guding',
			title: '我的宽度是固定的',
			width: 120,
			closable: true,
			html: '<div>我的宽度被固定了，超过宽度的文字会被隐藏</div>',
			position: {
				a: '0px -132px',
				b: '-22px -132px'
			}
		});
		i++;
	}

</script>
</body>
</html>
